<template>
    <view class="page-wrap">
        <view class="code">
            <view class="mobile">{{userInfo.mobile}}</view>
            <view>
                <canvas id="qrcode" canvas-id="qrcode" class="qrcode"></canvas>
            </view>
            <view class="text">{{code}}</view>
            <view class="time">{{time}}</view>
        </view>
    </view>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
    import {
        dateFormat
    } from "@/utils/date.js";
    export default {
        data() {
            return {
                code: '',
                time: '',
                job: ''
            }
        },
        computed: {
            ...mapState(['userInfo'])
        },
        onLoad() {
            this.$api.user.code().then(res => {
                    this.code = res.code;
                    this.drawQrcode(this.code);
                }),
                this.job = setInterval(this.timeTask, 500);
        },
        beforeDestroy() {
            clearInterval(this.job)
        },
        methods: {
            timeTask() {
                this.time = dateFormat(new Date(), 'yyyy-MM-dd HH:mm:ss');
            },
            drawQrcode(data) {
                var qr = new UQRCode();
                // 设置二维码内容
                qr.data = data;
                // 设置二维码大小，必须与canvas设置的宽高一致
                qr.size = uni.upx2px(680);
                qr.margin = uni.upx2px(32);
                // 调用制作二维码方法
                qr.make();
                // 获取canvas上下文
                var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
                // 设置uQRCode实例的canvas上下文
                qr.canvasContext = canvasContext;
                // 调用绘制方法将二维码图案绘制到canvas上
                qr.drawCanvas();
            }
        }
    }
</script>

<style scoped lang="less">
    .page-wrap {
        min-height: 100vh;
        background: #fff;
        background: linear-gradient(147deg, #dae, #33f, #3f3, #f3f, #f33, #ff3, #dae, #33f);
        background-size: 100% 200%;
        animation: background-change 1s linear infinite;
        display: flex;
        align-items: center;
        justify-content: center;

        .code { 
            margin: 32rpx;
            text-align: center;
            font-size: 46rpx;
            font-weight: bold;
            text-shadow: #fff 1rpx 0 0, #fff 0 1rpx 0, #fff -1rpx 0 0, #fff 0 -1rpx 0;

            .mobile {
                margin-bottom: 32rpx;
            }

            .qrcode {
                width: 680rpx;
                height: 680rpx;
                display: block;
                margin: 0 auto;
            }

            .text,
            .time {
                margin-top: 32rpx;
            }
        }
    }

    @keyframes background-change {
        0% {
            background-position: 0 0%;
        }

        50% {
            background-position: 0 100%;
        }

        100% {
            background-position: 0 200%;
        }
    }
</style>